<template>
	<!-- 收藏列表 -->
	<view>
		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<!-- 文章列表 -->
		<view class="article" v-if="articleList.length>0 && current==0">
			<u-card @click="goUrl('/pages/index/article_desc?id='+item.id)" v-for="(item,index) in articleList" :key="index" :title="item.title" :sub-title="item.createtime" >
				<view class="" slot="body">
					<view class="u-body-item u-flex u-row-between u-p-b-0">
						<view class="u-body-item-title u-line-2">{{item.desc}}</view>
						<image :src="item.image" mode="aspectFill"></image>
					</view>
				</view>
				<!-- <view class="" slot="foot">
					<u-icon name="star-fill" size="34" color="" :label="item.sc_num+'收藏'"></u-icon>
				</view> -->
			</u-card>
		</view>
		<!-- 视频列表 -->
		<view v-if="videoList.length>0 && current==1">
			<u-waterfall v-model="videoList">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" @click="goUrl('/pages/index/video_desc?id='+item.id)" v-for="(item, index) in leftList" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-shop">
							{{item.desc}}
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" @click="goUrl('/pages/index/video_desc?id='+item.id)" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.title}}
						</view>
						<view class="demo-shop">
							{{item.desc}}
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[
					{
						name:'资讯',
					},
					{
						name:'视频'
					}
				],
				articleList:[],
				videoList:[],
				page:1,
				limit:10,
				total:0,
				current:0,
				
			}
		},
		onLoad() {
			this.getArticleList(1)
		},
		onReachBottom() {
			if(this.current == 0){
				if(this.articleList.length<this.total){
					this.getArticleList();
				}
			}else if(this.current == 1){
				if(this.videoList.length<this.total){
					this.getVideoList();
				}
			}
		},
		methods: {
			change(index){
				this.current = index;
				this.videoList = [];
				this.articleList = [];
				this.page = 1;
				if(index == 1){
					this.getVideoList(1);
				}
				if(index == 0){
					this.getArticleList(1);
				}
			},
			getArticleList(num){
				var _this = this;
				_this.$http('article.collectList',{
					page:num?num:_this.page,
					limit:_this.limit,
					
				}).then(res=>{
					_this.articleList = _this.articleList.concat(res.data.list);
					_this.total = res.data.total;
					_this.page++;
				})
			},
			getVideoList(num){
				var _this = this;
				_this.$http('video.collectList',{
					page:num?num:_this.page,
					limit:_this.limit,
					
				}).then(res=>{
					_this.videoList = _this.videoList.concat(res.data.list);
					_this.total = res.data.total;
					_this.page++;
				})
			},
			goUrl(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style>
	.article .u-body-item {
	 	font-size: 32rpx;
	 	color: #333;
	 	padding: 20rpx 10rpx;
	 }
		
	 .article .u-body-item image {
	 	width: 120rpx;
	 	flex: 0 0 120rpx;
	 	height: 120rpx;
	 	border-radius: 8rpx;
	 	margin-left: 12rpx;
	 }
	 
	 .demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	 
	 	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	 	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	 	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
